<template>
	<view class="user">
		<!-- 底图 - 开始 -->
		<image class="user-header-image" :src="user_info.userbg" mode="aspectFill"></image>
		<!-- 底图 - 结束 -->

		<!-- 用户信息 - 开始 -->
		<view class="user-info-box" @click="to_personal_info(user_info.id)">
			<u-avatar :src="user_info.usertx" shape="square"></u-avatar>
			<view class="user-info-right">
				<view class="user-nickname">{{ user_info.nickname }}</view>
				<view class="user-signature">{{ user_info.signature }}</view>
			</view>
		</view>
		<!-- 用户信息 - 结束 -->

		<!-- 关于我的数据展示 -->
		<view class="user-account">
			<!-- 标题 -->
			<view class="user-account-title">我的账户</view>
			<!-- 内容 -->
			<view class="user-account-content">
				<view class="user-account-content-item">
					<view class="user-account-content-item-num">{{ user_info.money }}</view>
					<view class="user-account-content-item-title">金币</view>
				</view>
				<view class="user-account-content-item">
					<view class="user-account-content-item-num">{{ user_info.integral }}</view>
					<view class="user-account-content-item-title">积分</view>
				</view>
				<view class="user-account-content-item">
					<view class="user-account-content-item-num">{{ user_info.commentcount }}</view>
					<view class="user-account-content-item-title">评论</view>
				</view>
				<view class="user-account-content-item">
					<view class="user-account-content-item-num">{{ user_info.likecount }}</view>
					<view class="user-account-content-item-title">点赞</view>
				</view>
			</view>
		</view>

		<view class="user-footer">
			<u-cell icon="account-fill" size="large" title="我的信息" isLink @click="goPage('/pages/member/my-info')"></u-cell>
			<u-cell icon="star-fill" size="large" title="我的收藏" isLink @click="goPage('/pages/member/my-collections?type=0')"></u-cell>
			<u-cell icon="clock-fill" size="large" title="浏览历史" isLink @click="goPage('/pages/member/my-collections?type=1')"></u-cell>
			<u-cell icon="pushpin-fill" size="large" title="举报记录" isLink @click="goPage('/pages/member/report_list')"></u-cell>
			<u-cell icon="lock-fill" size="large" title="账号安全" isLink @click="goPage('/pages/member/account-security')"></u-cell>
			<u-cell icon="setting-fill" size="large" title="设置" isLink @click="goPage('/pages/member/setting')"></u-cell>
			<u-cell icon="warning-fill" size="large" title="退出登录" isLink @click="loginout"></u-cell>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login_user_id: '', //登录用户id
			user_info: {}, //用户信息
			urls: [],
		}
	},
	onLoad() {
		this.login_user_id = uni.getStorageSync('userid');
		//未登录跳转到登录页面
		if (this.login_user_id != '') {
			this.get_user_other_information(this.login_user_id);
		}
	},
	onShow() {
		this.login_user_id = uni.getStorageSync('userid');
		//未登录跳转到登录页面
		if (this.login_user_id == '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		} else {
			this.get_user_other_information(this.login_user_id);
		}
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_user_other_information(this.login_user_id);
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 获取用户信息
		async get_user_other_information(id) {
			let get_user_other_information = await this.$api.get_user_other_information({ userid: id });
			if (get_user_other_information.code == 1) {
				this.user_info = get_user_other_information.data;
			}
		},
		to_personal_info(id) {
			uni.navigateTo({
				url: '/pages/member/personal_info?id=' + id
			})
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			})
		},
		loginout() {
			uni.showModal({
				title: '提示',
				content: '确定退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.$api.log_out_login().then((res) => {
						}).catch((err) => {
							this.loading = false;
							console.log('request fail', err);
						})
						uni.removeStorageSync('userid');
						uni.removeStorageSync('username');
						uni.removeStorageSync('usertoken');
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1000);
					}
				}
			});
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #F4F4F4;
}

.user {
	.user-header-image {
		width: 100%;
		height: 240px;
	}

	.user-info-box {
		background: #ffffff;
		padding: 30rpx;
		margin: -80rpx 20rpx 20rpx 20rpx;
		position: relative;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.user-avg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		.user-nickname {
			margin-left: 20rpx;
		}

		.user-signature {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.user-account {
		background: #ffffff;
		padding: 30rpx 40upx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		position: relative;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;

		.user-account-title {
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}

		.user-account-content {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.user-account-content-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.user-account-content-item-title {
					font-size: 24rpx;
					color: #666666;
				}

				.user-account-content-item-num {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
				}
			}
		}
	}

	.user-footer {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 20rpx;
	}
}
</style>
